<template>
  <!-- 搜索群 -->
  <div class="add-group">
    <div class="action">
      <div class="item send flex-center" @click="onCancel">
        <i class="fa fa-angle-left fa-lgl"></i>
        <span>返回</span>
      </div>
      <div class="input white-input">
        <cube-input clearable v-model="groupId" placeholder="请填写群ID" @input="onSearch" type="number" class="search-input"/>
      </div>

      <!-- <div class="item send flex-center" @click="onSearch" v-else>
        <span>搜索</span>
      </div>-->
    </div>
    <div class="gap" v-show="searchResult.groupNick" >
      群聊
    </div>
    <div class="group-list-item" v-show="searchResult ? searchResult.groupNick : false" v-hammer:tap="(ev) => onGroupClicked(ev)">
      <div class="icon">
        <img :src="searchResult.headUrl" alt />
      </div>
      <div class="info flexbox justify-start align-center">
        <div class="title">{{ searchResult.groupNick }}</div>
      </div>
      <!-- <div class="desc">
        <div class="time">加入</div>
      </div> -->
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import MessageMixin from '@/mixins';
import { MsgTypeKV } from '@/api/socket/imClient';
import { Webim } from '@/utils/types';
declare const $Vue: Vue;
declare const webim: Webim;

@Component<AddGroup>({
  mixins: [MessageMixin],
})
export default class AddGroup extends Vue {
  // 表示映射chat模块下的mutation方法

  @Prop({})
  searchResult: any;
  // 搜索id
  private groupId: string = '';

  protected mounted() {
  }

  private showSearchResult: boolean = false;

  private get computedResult() {
    if (this.searchResult) {
      return this.searchResult
    } else {
      return {};
    }
  }

  private onCancel() {
    this.$emit('hide');
  }

  /**
   * 变化即搜索
   */
  private onSearch() {
    if (this.groupId !== '' && !Number.isNaN(Number(this.groupId))) {
      this.sendMessage(MsgTypeKV.searchGroupByGroupId, {
        groupId: this.groupId
      });
    }
  }

  /**
   * 点击加入群聊
   */
  private onGroupClicked() {
    this.sendMessage(MsgTypeKV.applyGroup, {
      groupId: this.searchResult.groupId,
    });
  }

  /**
   * 根据群ID搜索群
   */
  // private $searchGroupByGroupId(data: any) {
  //   console.error('searchGroupByGroupId', data);
  //   if (data.result === 0) {
  //     this.searchResult = {
  //       ...data.info,
  //       imGroupId: data.imGroupId,
  //     };
  //     this.showSearchResult = true;
  //   } else {
  //     this.showSearchResult = false;
  //     this.searchResult = {};
  //   }
  // }

  /**
   * 申请加入群之后的返回结果处理
   */
  // private $applyGroup(data: any) {
  //   if (data.result === 0) {
  //     this.$createToast({
  //       txt: data.message,
  //       type: "correct",
  //       time: 3000
  //     }).show();
  //     // 取消显示
  //     this.onCancel();
  //   } else {
  //     this.$createToast({
  //       txt: data.message,
  //       type: "warn",
  //       time: 3000
  //     }).show();
  //   }
  // }
}
</script>

<style lang="stylus" scoped>
.add-group
  width 100%
  height 100%
  background #f1f1f1
  padding 2px 
  box-sizing border-box
  
.action
  height 40px 
  width 100%
  display flex
  justify-content space-between
  align-items center
  padding 6px 2px
  box-sizing border-box
  background #f1f1f1
  .send span 
    display inline-block
    padding-left 6px
    position relative
    top 0
  .input 
    width 84%
    flex-basis 84%
    height 32px
  .item 
    width 16%
    flex-basis 16%
    height 100% 
    line-height 100% 


.cube-input
  background #fff!important  

.cube-input-field 
  background #fff!important  

.info 
  padding 0
  width 84% 
  flex-basis 84% 

.group-list-item
  padding 2px 6px
  box-sizing border-box

.gap
  height 18px
  line-height 18px
  font-size 11px
  padding 4px 6px
  text-align left 
  color #565656
  border-bottom 0.2px solid #f1f1f1

.group-list-item .info
  border none!important
</style>

